<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="userId" label="编号" width="60" />
      <el-table-column prop="userName" label="用户名" width="80" />
      <el-table-column prop="roleNames" label="角色" width="80" />
      <el-table-column v-slot="scoped" prop="userSex" label="性别" width="60">
        <span v-if="scoped.row.userSex == true">男</span>
        <span v-else>女</span>
      </el-table-column>
      <el-table-column prop="province" label="所在省份" width="100" />
      <el-table-column prop="city" label="所在市" width="80" />
      <el-table-column prop="county" label="所在县" width="80" />
      <el-table-column
        v-slot="scoped"
        prop="userAddress"
        label="地址详情"
        width="150"
      >
        {{ scoped.row.userAddress.substring(0, 5) + "..." }}
      </el-table-column>
      <el-table-column prop="creator" label="创建人" />
      <el-table-column
        v-slot="scoped"
        prop="creationDate"
        label="创建时间"
        width="120"
      >
        {{ scoped.row.creationDate.substring(0, 10) }}
      </el-table-column>
      <el-table-column prop="updateor" label="修改人" />
      <el-table-column
        v-slot="scoped"
        prop="updatedate"
        label="修改时间"
        width="120"
      >
        {{
          scoped.row.updatedate ? scoped.row.updatedate.substring(0, 10) : null
        }}
      </el-table-column>
      <el-table-column v-slot="scoped" prop="" label="操作" width="150px">
        <el-button type="success" size="small" @click="upd(scoped.row.userId)">
          修改
        </el-button>
        <el-button type="danger" @click="del(scoped.row.userId)" size="small"
          >删除</el-button
        >
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="form.PageIndex"
      v-model:page-size="form.PageSize"
      :page-sizes="[1, 2, 3, 15]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.TotalCount"
      @size-change="getuser()"
      @current-change="getuser()"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { KongaUrl } from "@/axios/axiosHelp";

const router = useRouter();
const form = reactive({
  TotalCount: 0,
  PageCount: 0,
  PageSize: 15,
  PageIndex: 1,
});
const tableData: any = ref([]);
const getuser = () => {
  KongaUrl
    .get("/user/api/Backed/Getusers", {
      params: form,
    })
    .then((res) => {
      tableData.value = res.data.items;
      form.TotalCount = res.data.totalCount;
      form.PageCount = res.data.pageCount;
    });
};
const del = (id: any) => {
  ElMessageBox.confirm("是否确认删除?", "提示", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  }).then(() => {
    axios
      .post("https://localhost:7070/api/Addur/DelUser", { userId: id })
      .then((res) => {
        if (res.data.code == 500) {
          ElMessage.success(res.data.msg);
          getuser();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
  });
};
const upd = (userId: any) => {
  router.push({
    name: "updateuser",
    query: { id: userId },
  });
};
onMounted(() => {
  getuser();
});
</script>

<style scoped>
</style>